
<template>
  <div>
    <a-button type="primary" plain @click="dialogVisibleDynamicTable = true">自定义表格属性设置</a-button>
    
    <a-modal title="自定义表格属性设置" :visible.sync="dialogVisibleDynamicTable" width="50%" @cancel="dialogVisibleDynamicTable = false" @ok="handleOkClick">
      <a-button icon="plus" @click="handleAddClick" style="margin-bottom:20px;">添加</a-button>
      
      <a-table :columns="columns" :data-source="formData" :pagination="false" bordered style="width: 100%">
        <span slot="action" slot-scope="text, record, index">
          <a-button @click="handleEditorClick(index, record)" type="text" size="small">编辑</a-button>
          <a-divider type="vertical" />
          <a-button type="text" size="small" @click="handleDeleteClick(index, record)">删除</a-button>
        </span>
      </a-table>
    </a-modal>
    
    <a-modal title="新增" :visible.sync="dialogVisible" width="50%" @cancel="dialogVisible=false" @ok="handleSaveClick">
      <a-form-model :model="rowFormData">
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称:">
          <a-input v-model.trim="rowFormData['name']" type="text" placeholder="请输入名称" clearable/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="key值:">
          <a-input v-model.trim="rowFormData['key']" type="text" placeholder="请输入key值" clearable/>
        </a-form-model-item>
        <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="宽度:">
          <a-input-number v-model.trim="rowFormData['width']" placeholder="请输入宽度" style="width:100%" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
export default {
  name: 'customTable',
  model: {
    prop: "formData",
    event: "input"
  },
  props: {
    formData: Array
  },
  data() {
    return {
      dialogVisibleDynamicTable: false,
      dialogVisible: false,
      rowFormData: {
        name: "",
        key: "",
        width: ""
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      columns: [
        {
          title: '名称',
          dataIndex: 'name',
          width: 60
        },
        {
          title: 'key值',
          dataIndex: 'key',
          width: 60
        },
        {
          title: '宽度',
          dataIndex: 'width',
          width: 60
        },
        {
          title: '操作',
          width: 60,
          scopedSlots: { customRender: 'action' },
        },
      ],
      flag: true, // true 新增， false 编辑
      indexEditor: -1, // 编辑第几个数据
      tableData: []
    };
  },
  methods: {
    // 新增
    handleAddClick() {
      this.rowFormData = {};
      this.flag = true;
      this.dialogVisible = true;
    },
    // 编辑
    handleEditorClick(index, row) {
      this.flag = false;
      this.rowFormData = this.deepClone(row);
      this.indexEditor = index;
      this.dialogVisible = true;
    },
    // 关闭
    handleClose() {
      this.dialogVisible = false;
    },
    // 保存
    handleSaveClick() {a
      if (this.flag) {
        // 新增
        this.formData.push(this.rowFormData);
        this.dialogVisible = false;
      } else {
        // 编辑
        this.formData[this.indexEditor] = this.rowFormData;
        this.$set(this.formData, this.indexEditor, this.rowFormData);
        this.dialogVisible = false;
      }
    },
    // 删除
    handleDeleteClick(index) {
      this.formData.splice(index, 1);
    },
    handleOkClick() {
      this.dialogVisibleDynamicTable = false
      this.$emit("input", this.formData);
      this.$emit("change", this.formData);
    }
  }
};
</script>
